<template>
    <div style="width:100%;height:100%;" id="user_flow"></div>
</template>

<script>
import echarts from 'echarts';

const option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
        {
            name: '男生寝室',
            type: 'gauge',
            min: 0,
            max: 1000,
            detail: {
                formatter: '{value}个床位',
                fontSize: 16,
                offsetCenter: [0, '50px']
            },
            data: [{value: 500, name: '男生寝室'}],
            center: ['25%', '50%'],
            radius: '80%',
            title: {
                offsetCenter: [0, '80px']
            },
            axisLine: {
                lineStyle: {
                    // color: [],
                    width: 20
                }
            },
            splitLine: {
                length: 20
            }
        },
        {
            name: '女生寝室',
            type: 'gauge',
            min: 0,
            max: 1000,
            detail: {
                formatter: '{value}个床位',
                fontSize: 16,
                offsetCenter: [0, '50px']
            },
            data: [{value: 550, name: '女生寝室'}],
            center: ['75%', '50%'],
            radius: '80%',
            title: {
                offsetCenter: [0, '80px']
            },
            axisLine: {
                lineStyle: {
                    // color: [],
                    width: 20
                }
            },
            splitLine: {
                length: 20
            }
        }
    ]
};

export default {
    name: 'userFlow',
    mounted () {
        let userFlow = echarts.init(document.getElementById('user_flow'));
      
        userFlow.setOption(option);

        window.addEventListener('resize', function () {
            userFlow.resize();
        });
    }
};
</script>
